<template>
	<view class="content">
		<view class="topContent">
			<view class="top">
				<image src="../../static/index/back.png" class="rightImg" @tap="back"></image>
				实名认证
			</view>
			<image src="../../static/authentication/step1.png" class="stepImg"></image>
		</view>
		
		<!-- 真实姓名 -->
		<view class="inputTitle">
			<view class="procss"></view>
			<view class="title">真实姓名</view>
		</view>
		<view class="inputContent">
			<input placeholder="请输入真实姓名" placeholder-class="placeholder" v-model="realName" maxlength="6" />
		</view>
		<!-- 身份证号 -->
		<view class="inputTitle">
			<view class="procss"></view>
			<view class="title">身份证号</view>
		</view>
		<view class="inputContent">
			<input placeholder="请输入身份证号" placeholder-class="placeholder"  v-model="idCard" />
		</view>
		
		<!-- 上传身份证 -->
		<!-- <view class="upContent">
			<view class="positive">
				<view class="imgContent">
					<image src="../../static/authentication/positive.png" class="cardImg"></image>
				</view>
				<view class="text">上传身份证正面</view>
			</view>
			<view class="positive">
				<view class="imgContent">
					<image src="../../static/authentication/side.png" class="cardImg"></image>
				</view>
				<view class="text">上传身份证反面</view>
			</view>
		</view> -->
		<!-- <view class="texts"><span class="red">*</span>拍摄时请确保身份证<span class="yellow">边框完整，字体清晰，亮度均匀</span></view> -->
		<view class="next" @tap="next">下一步</view>
	</view>
</template>

<script>
	import { initUserFaceVerify } from '../../api/api.js'
	//#ifdef APP-PLUS
	const n = uni.requireNativePlugin('AP-FaceDetectModule');
	//#endif
	
	export default {
		data() {
			return {
				// 真实姓名
				realName:'',
				// 身份证号
				idCard:'',
				// MetaInfo环境参数
				metaInfo:''
			}
		},
		onShow() {
			//#ifdef APP-PLUS
			//获取MetaInfo环境参数。
			this.getMetaInfo()
			//#endif
		},
		methods: {
			//获取环境参数接口。
			getMetaInfo: function() {
			  this.metaInfo = n.getMetaInfo();
			},
			back() {
				uni.navigateBack({
					delta:1
				})
			},
			next() {
				if( !this.realName ) {
					uni.showToast({
						title:'请填写真实姓名',
						icon:'none'
					})
					return false
				}
				if( !this.idCard ) {
					uni.showToast({
						title:'请填写身份证号',
						icon:'none'
					})
					return false
				}
				let data = {
					realName:this.realName,
					idCard:this.idCard,
					metaInfo:this.metaInfo,
				}
				initUserFaceVerify(data).then( res=> {
					if( res.code == 200 ) {
						uni.redirectTo({
							url:'./face?id=' + res.data.id + '&certifyId=' + res.data.certifyId + '&realName=' + this.realName
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		.topContent {
			margin-bottom: 50rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 76rpx;
			width: 750rpx;
			height:244rpx;
			background: linear-gradient(360deg, #3D8DFF 0%, #1274FF 100%);
			.top{
				position: relative;
				width: 750rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 50rpx;
				.rightImg {
					position: absolute;
					top: 9rpx;
					left: 36rpx;
					width: 18rpx;
					height: 32rpx;
				}
			}
			.stepImg {
				margin-top: 60rpx;
				width: 630rpx;
				height: 99rpx;
			}
		}
		.inputTitle {
			margin:0 0 24rpx 40rpx;
			display: flex;
			align-items: center;
			.procss {
				color: red;
			}
			.title {
				margin-left: 12rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 37rpx;
			}
		}
		.inputContent {
			margin:0 0 40rpx 32rpx;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			width: 656rpx;
			height: 80rpx;
			background: #F5F5F5;
			border-radius: 8rpx;
			.placeholder {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #9DA3AB;
				line-height: 40rpx;
			}
		}
		// 上传身份证
		// .upContent {
		// 	margin-top: 50rpx;
		// 	display: flex;
		// 	align-items: center;
		// 	.positive {
		// 		width: 50%;
		// 		display: flex;
		// 		flex-direction: column;
		// 		align-items: center;
		// 		.imgContent {
		// 			width: 320rpx;
		// 			height: 208rpx;
		// 			.cardImg {
		// 				width: 100%;
		// 				height: 100%;
		// 			}
		// 		}
		// 		.text {
		// 			margin-top: 36rpx;
		// 			text-align: center;
		// 			width: 240rpx;
		// 			height: 64rpx;
		// 			background: #FE3B33;
		// 			border-radius: 4rpx;
		// 			font-size: 26rpx;
		// 			font-family: PingFangSC-Regular, PingFang SC;
		// 			font-weight: 400;
		// 			color: #FFFFFF;
		// 			line-height: 64rpx;
		// 		}
		// 	}
		// }
		// .texts {
		// 	margin: 90rpx 0 0 40rpx;
		// 	font-size: 24rpx;
		// 	font-family: PingFangSC-Regular, PingFang SC;
		// 	font-weight: 400;
		// 	color:#999999;
		// 	line-height: 33rpx;
		// 	.red {
		// 		margin-left: 10rpx;
		// 		color:red;
		// 	}
		// 	.yellow {
		// 		margin-left: 10rpx;
		// 		color:#FFCE00;
		// 	}
		// }
		.next {
			margin: 490rpx 0 0 32rpx;
			text-align: center;
			width: 686rpx;
			height: 90rpx;
			background: #FE3B33;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.16);
			border-radius: 8rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 90rpx;
		}
	}
</style>
